<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<style>
			.tbhead{
				background: #ccc;
				text-align: center;
				color: red;
			}
			.datarow{
				text-align: center;
				color: blue;
			}
			.txt{
				width: 100px;
			}
		</style>
	</head>
	<body>
		<h2>学生信息管理</h2>
		<input type="button" id="btfind" value="查询"/>&nbsp;
		<input type="button" id="btadd" value="新增" style="display: inline;"/>&nbsp;
		<input type="button" id="btdel" value="删除" style="display: inline;"/>&nbsp;
		<input type="button" id="btchange" value="修改" style="display: inline;"/>&nbsp;
		<div id="app">
			<br />
			学号：<input type="text" name="sid" id="sid" class="txt"/>&nbsp;
			姓名：<input type="text" name="sname" id="sname" class="txt"/>&nbsp;
			密码：<input type="text" name="spassword" id="spassword" class="txt"/>&nbsp;
			性别：<select id="sex">
				<option value="男" selected="selected">男</option>
				<option value="女">女</option>
			</select>&nbsp;
			<br /><br />
			<table border="1px" width="60%" cellpadding="0" cellspacing="0" id="studtable">
				<tr class="tbhead">
					<td>选择</td>
					<td>学号</td>
					<td>姓名</td>
					<td>性别</td>
				</tr>
			</table>
		</div>
		<script>
			var url='http://localhost:8080'
			function init(){

			$.getJSON(url+'/getUser','',function(data){
				$('.datarow').remove();
				data.forEach(o=>show(o));
			})
			}init();
			
			// init();
			function show(stu){
				var tr=`
				<tr class='datarow'>
				<td><input type='checkbox'></td>
				<td>${stu.id}</td>
				<td>${stu.username}</td>
				<td>${stu.sex}</td>
				</tr>
				`
				$('#studtable').append(tr);
			}
			function addStu(){
				let username=$('#sname').val();
				let password=$('#spassword').val();
				let sex=$('#sex').val();
				console.log(username+password+sex);
				var student={
					username:username,
					password:password,
					sex:sex,
				}
				console.log(student);
				$.post(url+'/register', student,function(data){
					console.log(data);
					init();
				})
			}
			function delStu(){
				var ids=[];
				$(':checkbox:checked').each(function(i){
					let id=$(this).parent().next().text();
					ids.push(id);
					console.log(id);
				})
				console.log(ids);
				let msg={ids:ids.join(',')}
				console.log(msg);
				// ids=ids.join(',');//转换为strin型join里面可填分割方式
				$.get(url+'/dalete',msg,function(data){
					console.log(data);
					init();
				})
			}
		function findStu(){
			let id=$('#sid').val();
			console.log(id);
			var idss={
				idss:id,
			}
			// let cxa={idss:idss.join(',')}
			console.log(idss);
			$.get(url+'/find',idss,function(data){
				console.log(data);
				console.log(data.body.length);
				if(data.body.length>0){
					alert('此学号的用户：'+data.body[0].username);
				}else{
					alert('无用户');
				}
				// console.log(data.body[0].id);
				init();
				})
			}
		
			
			$('#btadd').click(addStu);
			$('#btdel').click(delStu);
			$('#btfind').click(findStu);
			// $('#btchange').click();
		</script>
	</body>
</html>
